<template>
  <div class="article-list" ref="article-list" v-loading="reLoading">
    <!-- 下拉刷新 -->
    <!--    <van-pull-refresh-->
    <!--        v-model="isRefreshLoading"-->
    <!--        :success-text="refreshSuccessText"-->
    <!--        :success-duration="1500"-->
    <!--        @refresh="onRefresh"-->
    <!--    >-->
    <!-- 文章列表 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" >
       <van-list
        class="list-item"
        v-model="loading"
        :finished="finished"
        :finished-text="list.length === 0 ? '暂无数据' : '没有更多了'"
        @load="onLoad"
    >
      <ArticleItem
          v-for="(item, index) in list"
          :key="index"
          :articles="item"
      >
      </ArticleItem>
    </van-list>
    </van-pull-refresh>
   
    <!-- /文章列表 -->
    <!--    </van-pull-refresh>-->
  </div>
</template>

<script>
import ArticleItem from './articleItem'
import {debounce} from 'lodash'
import {contentSearch} from '@/api/share';

export default {
  name: "articleListItem",
  components: {ArticleItem},
  props: {
    article: {
      type: Object,
      required: true // 必选
    }
  },
  data() {
    return {
      list: [], // 数据列表
      loading: false, // 控制加载中的 loading 状态
      finished: false, // 控制加载结束的状态，当加载结束，不再触发加载更多
      current: 1, // 获取下一页数据current
      size: 10,
      isRefreshLoading: false, // 下拉刷新的loading状态
      refreshSuccessText: '', // 下拉刷新的成功提示
      scrollTop: 0, // 列表滚动到顶部的距离
      isLoading:false,
      reLoading:false
    }
  },
  mounted() {
    console.log('监听article变化', this.article)
    //监听滚动条的滚动事件
    // const articleList = this.$refs['article-list']
    // // 利用 debounce函数 实现 防抖 🌟🌟
    // articleList.onscroll = debounce(() => {
    //   // 拿到滚动条距离页面顶部的距离
    //   this.scrollTop = articleList.scrollTop
    // }, 50)
    //页面数据缓存到sessionStorage
    // const homeData = sessionStorage.getItem('homeData');
    // if (JSON.parse(homeData)) {
    //   this.list = JSON.parse(homeData)
    //   this.loading = false
    //   console.log('mounted 有homeData', this.list)
    // } else {
    //   this.loading = true
    //   this.onLoad()
    //   console.log('mounted 没有homeData 请求接口onLoad')
    // }
  },
  activated() {
    this.$refs['article-list'].scrollTop = this.scrollTop
  },
  methods: {
    // onLoadNew() {
    //   this.current += 1
    //   this.onLoad();
    // },
    // 获取文章列表
    async onLoad() {
      console.log('请求load接口')
      const {data} = await contentSearch({
        routerId: this.article.routerId,
        size: this.size,
        current: this.current,
        token: this.$store.state.token
      })
      if (data !== null) {
        const {records} = data
        this.list.push(...records)
        console.log('list', this.list)
        sessionStorage.setItem('homeData', JSON.stringify(this.list))
        // 3. 加载结束
        this.loading = false
        this.isLoading = false
         if (this.reLoading) {
          this.$toast('刷新成功')
          this.reLoading = false
         }
        
       
        
        if (records.length >= 10) {
          this.current += 1
        } else {
          this.finished = true
        }
        // if (records.length <= 0) {
        //   this.finished = true
        // } else {
        //   this.finished = false
        // }
      } else {
        this.finished = true
      }
    },
    // 下拉刷新, 组件自己就会展示 loading 状态
    // async onRefresh() {
    //   // console.log('onRefresh')
    //   try {
    //     // 1. 请求获取数据
    //     const {data} = await contentSearch({
    //       routerId: this.article.routerId,
    //       size: this.size,
    //       current: this.current
    //       // timestamp: Date.now() // 当前最新时间戳
    //     })

    //     // 2. 把数据放到数据列表中（往顶部追加）
    //     const {results} = data.data
    //     this.list.unshift(...results)

    //     // 3. 关闭刷新的状态 loading
    //     this.isRefreshLoading = false

    //     // 4. 下拉刷新的成功提示
    //     this.refreshSuccessText = `更新了${results.length}条数据`
    //   } catch (err) {
    //     console.log(err)
    //     this.isRefreshLoading = false // 关闭下拉刷新的 loading 状态
    //     this.$toast.fail('刷新失败')
    //   }
    // },
    onRefresh(){
      this.current = 1
      this.list = []
      this.reLoading = true
      this.onLoad()
      
    }
  },
}
</script>

<style lang="less" scoped>
.article-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 95px;
  bottom: 10px;
  // 超出部分用 滚动条设置
  overflow-y: scroll;

  .list-item /deep/ .van-list__error-text, .van-list__finished-text, .van-list__loading {
    line-height: 0;
  }
}
</style>
